<template>
  <basic-container class="noScrollBar tabMain-wrap">
    <avue-crud
      :option="detailOptions.options"
      :data="data"
      ref="crud"
      v-model="form"
      :page.sync="page"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @refresh-change="refreshCharge"
      @on-load="onLoad"
      @row-save="rowSave"
    >
      <template slot="menu" slot-scope="{ row }">
        <el-button
          icon="el-icon-share"
          size="small"
          plain
          type="text"
          @click="goApprove(row)"
          >流程设计</el-button
        >
        <!--<el-button-->
          <!--icon="el-icon-s-check"-->
          <!--size="small"-->
          <!--plain-->
          <!--type="text"-->
          <!--@click="process(row)"-->
          <!--&gt;待办流程</el-button-->
        <!--&gt;-->
      </template>
    </avue-crud>
    <el-drawer
      :visible.sync="showAddMenuDrawer"
      :direction="'ltr'"
      :title="caseTit"
      :size="'75%'"
      :center="false"
      :modal="false"
      :destroy-on-close="true"
    >
      <approveDetail :formsList="forms" :detaiList="detailOptions">
      </approveDetail>
    </el-drawer>
    <my-drawer
      class="avue-dialog bidBusinessDrawer"
      :title="'查看'"
      :showDraw="viewShow"
      @close="viewShow = false"
    >
      <avue-crud
        :option="EditionOption.options"
        :data="dataEdition"
        ref="crud"
        v-model="form"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @row-del="rowModelDel"
        @row-update="rowUpdates"
        @refresh-change="refreshModelCharge()"
        @row-save="rowSave"
      >
        <template slot="menuLeft" slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="addVersion(row)"
            >新增</el-button
          >
        </template>
        <template slot="menu" slot-scope="{ row }">
          <el-button
            icon="el-icon-share"
            size="small"
            plain
            type="text"
            @click="updata(row)"
            >设置</el-button
          >
          <el-button
                  :icon="row.status == 0?'el-icon-video-play':'el-icon-video-pause'"
                  size="small"
                  type="text"
                  plain
                  :disabled="row.status == '1' ? true : false"
                  @click.native="active(row)"
          >
            {{ row.status == '0' ? '激活':'禁用'}}
          </el-button>
        </template>
      </avue-crud>
    </my-drawer>
  </basic-container>
</template>

<script>
import myDrawer from "@/components/drawer/myDrawer";
import approveDetail from "./publicApprove/approveDetail";
import {
  getFlowList,
  submitFlow,
  updateFlow,
  delFlow,
  delModel,
  getWorkList,
  flowSubmit,
  getmodelList,
  flowModelActive,
} from "@/api/approve/approve";
export default {
  components: {
    approveDetail,
    myDrawer,
  },

  data() {
    return {
      flowName:"",
      showAddMenuDrawer: false,
      viewShow: false,
      caseTit: "",
      form: {},
      forms: {},
      selectionId: "",
      processInstanceId: "",
      selectionList: [],
      approveList: "",
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      followBox: false,
      deleteReason: "",
      detailOptions: {
        label: "审批流程",
        name: "approve",
        options: {
          height: "calc(100vh - 425px)",
          dialogDirection: "ltr",
          submitBtn: false,
          emptyBtn: false,
          menuForm: false,
          dialogType: "drawer",
          height: "auto",
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          selection: false,
          editBtn: true,
          addBtn: true,
          viewBtn: true,
          dialogWidth: 900,
          dialogClickModal: false,
          column: [
            // {
            //   label: "流程编号",
            //   prop: "code",
            //   search: true,
            //   shows: false,
            //   disabled: true,
            //   overHidden: true,
            // },
            {
              label: "流程名称",
              prop: "name",
              search: true,
              overHidden: true,
            },
            {
              label: "流程说明",
              prop: "introduce",
              type: "textarea",
              overHidden: true,
              search: true,
            },
          ],
        },
      },

      EditionOption: {
        options: {
          addBtn: false,
          columnBtn: false,
          detail: true,
          editBtn: false,
          submitBtn: false,
          emptyBtn: false,
          gutter: 10,
          labelWidth: 110,
          column: [
            {
              label: "模型编号",
              prop: "id",
              span: 8,
            },
            {
              label: "版本号",
              prop: "version",
              span: 8,
            },
            {
              label: "状态",
              prop: "status",
              type: "select",
              dicData: [
                {
                  label: "正常",
                  value: 1,
                },
                {
                  label: "禁用",
                  value: 0,
                },
              ],
            },
          ],
        },
      },
      data: [],
      dataEdition: [],
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    updata(row) {
      this.viewShow = false;
      flowSubmit(row.id).then((res) => {
        if (res) {
          let targetUser = res.data.data;
          targetUser.name = this.flowName;
          this.$router.push({
            path: "/workFlow/view",
            query: {
              key: JSON.stringify(targetUser),
            },
          });
        }
      });
    },
    //新增版本号
    addVersion(row) {
      this.viewShow = false;
      let targetUser={
         flowId:this.processInstanceId,
         context: "",
         remark:'',
          id: '',
          version: '',
          status: '',
          name: this.flowName,
      }
      this.$router.push({
            path: "/workFlow/view",
            query: {
              key: JSON.stringify(targetUser),
            },
      })
    },
    //流程设计
    goApprove(row) {
      this.viewShow = true;
      this.processInstanceId = row.id;
      this.flowName = row.name;
      this.load_flow_model(row.id);
    },
    //去审批
    rowUpdates(row) {
      flowSubmit(row.id).then((res) => {
        if (res) {
          let targetUser = res.data.data;
          targetUser.name = this.flowName ;
          this.$router.push({
            path: "/workFlow/view",
            query: {
              key: JSON.stringify(targetUser),
            },
          });
        }
      });
    },

    // 激活
    active(row){
        this.$confirm('是否确认激活?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            // 操作区域
            let status = row.status==0?1:0;
            flowModelActive(row.id,status).then(() => {
                this.$message({
                    type: "success",
                    message: "操作成功!",
                });
                this.load_flow_model(this.processInstanceId);
            (error) => {
                window.console.log(error);
            }});
        })
    },


    // 刷新流程数据模型列表
    load_flow_model(flowId){
        // 刷新区域
        let params = {
            flowId:flowId
        }
        getmodelList(params).then(
            res => {
                this.dataEdition = res.data.data
                this.loading = false
            }
        );
    },

    //待办流程
    process(row) {
      this.forms = row;
      this.showAddMenuDrawer = true;
      this.caseTit = "待办流程";
    },
    //新增
    rowSave(row, done, loading) {
      submitFlow(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    // 删除流程实例
    rowDel(row) {
      this.$confirm("确定删除流程实例嘛?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return delFlow(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    // 删除流程模型
    rowModelDel(row) {
        this.$confirm("确定删除流程模型嘛?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(() => {
                 delModel(row.id);
                 this.load_flow_model(row.id);
            })
    },
    // 编辑 修改
    rowUpdate(row, index, done, loading) {
      updateFlow(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    // 刷新流程实例
    refreshCharge() {
      this.onLoad(this.page, this.query);
    },
    // 刷新流程模型
    refreshModelCharge(){
      this.load_flow_model(this.processInstanceId);
    },
    onLoad(page, params = {}) {
      const { releaseTimeRange } = this.query;
      let values = {
        ...params,
      };
      if (releaseTimeRange) {
        values = {
          ...params,
          releaseTime_datege: releaseTimeRange[0],
          releaseTime_datelt: releaseTimeRange[1],
          ...this.query,
        };
        values.releaseTimeRange = null;
      }
      this.loading = true;
      getFlowList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
        // this.changecategory(data.records);
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-drawer__header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  margin: 0px;
}
/deep/.el-drawer__header > :first-child {
  font-size: 25px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  word-wrap: break-word;
}
/deep/.el-drawer .avue-form {
  padding: 20px;
}
</style>
